<template>
  <div class="w-1200-container">
    <Bread :nowTitle="activeObj['title']" />
    <div class="info-talbe-tag">市排行</div>
    <div class="table-cotainer">
      <el-skeleton style="width: 100%;height: 600px" :rows="12" :loading="loading" animated>

        <el-table
        
        :data="tableData"
        class="talbe-box"
        :headerCellStyle="{ ...headCellStyle }"
        :cellStyle="cellStyle"
      >
        <el-table-column type="index" label="排名" width="171">
        </el-table-column>
        <el-table-column prop="cityName" label="城市"> </el-table-column>
        <el-table-column
          v-for="item in yearLabelList"
          :key="item"
          :prop="item"
          :label="item"
        >
        </el-table-column>
      </el-table>

      </el-skeleton>
      
    </div>
  </div>
</template>

<script>
import { getGazelle, getUnicorn } from "@/api/info";

import Breadcrumb from "@/components/Breadcrumb";
import Bread from "@/components/Bread";

export default {
  components: {
    Breadcrumb,
    Bread,
  },
  data() {
    return {
      cellStyle: {
        textAlign: "center",
        padding: "1rem .5rem",
      },
      headCellStyle: {
        textAlign: "center",
        backgroundColor: "#f1f3fb",
      },
      tableData: [
        {
          cityName: "南昌市",
          year2020: 698,
          year2019: 659,
          year2018: 650,
          year2017: 535,
          year2016: 385,
        },
        {
          cityName: "王小虎",
          year2020: 698,
          year2019: 659,
          year2018: 650,
          year2017: 535,
          year2016: 385,
        },
        {
          cityName: "王小虎",
          year2020: 698,
          year2019: 659,
          year2018: 650,
          year2017: 535,
          year2016: 385,
        },
        {
          cityName: "王小虎",
          year2020: 698,
          year2019: 659,
          year2018: 650,
          year2017: 535,
          year2016: 385,
        },
      ],
      loading: false,
      yearLabelList: [],
      // 路由中的 :rankName 与 routeParamsList 中元素进行匹配
      paramsName: "rankName",
      routeParamsList: [
        {
          rankName: "unicorn",
          title: "独角兽企业排行",
          queryParams: { num: 1, size: 1 },
        },
        {
          rankName: "gazelle",
          title: "瞪羚企业排行",
          queryParams: { num: 2, size: 2 },
        },
      ],
      activeIndex: 0,
    };
  },
  computed: {
    activeObj() {
      return this.routeParamsList[this.activeIndex];
    },
  },
  created() {
    this.getInfo();
  },
  methods: {
    /**
     * @description paramsName 作为属性名，进行 对象 与 对象直接比对
     *              this.$route.params 与 routeParamsList 数组 进行比对
     *              比对成功返回  在数组中的索引
     *
     * @param {Array} routeParamsList  路由中的 params.rankName 必须在其数组中
     * @param {String} paramsName   在 routeParamsList 对象数组中，
     *                              依照 对象中的 paramsName  属性，进行比对
     * @return {number}
     */
    initRankName(routeParamsList, paramsName) {
      let params = this.$route.params;
      let activeIndex = 0;

      if (params && params[paramsName]) {
        activeIndex = routeParamsList.findIndex((item) => {
          return item[paramsName] === params[paramsName];
        });

        if (activeIndex === -1) {
          this.$router.push({
            path: "/404",
          });
        }
      }
      return activeIndex;
    },

    async getInfo() {
      this.activeIndex = this.initRankName(
        this.routeParamsList,
        this.paramsName
      );
      let res = null;
      this.loading = true
      if (this.activeIndex === 0) {
        res = await getUnicorn();
      }

      if (this.activeIndex === 1) {
        res = await getGazelle();
      }
      if (res.code === 200) {
        let sourceInfo = res.data[0];
        sourceInfo.length = Object.keys(sourceInfo).length;

        let tableData = Array.from(sourceInfo);

        if (!(tableData[0] ??= "")) {
          tableData.splice(0, 1);
        }
        this.tableData = this.manageInfo(tableData);
        this.loading = false
      }
      // this.activeObj = this.routeParamsList[this.activeIndex]
    },

    manageInfo(tableData) {
      let resList = [];

      tableData.forEach((tableItem) => {

        let cityName = Object.keys(tableItem)[0];

        let yearInfoObj = tableItem[cityName];
        yearInfoObj.length = Object.keys(yearInfoObj).length;

        let yearInfoList = Array.from(yearInfoObj);
        let resobj = {};

        yearInfoList.forEach((item) => {
          this.yearLabelList = Array.from(
            new Set([...this.yearLabelList, item["year"]])
          );
          resobj[item["year"]] = item.number;
        });

        resList.push({
          cityName,
          ...resobj,
        });
      });

      return resList;
    },
  },
};
</script>

<style lang="scss" scoped>
.info-talbe-tag {
  width: 130px;
  height: 48px;
  line-height: 48px;
  @apply text-center bg-blue-600 text-white;
}
.table-cotainer {
  width: 1200px;
  @apply mt-8 mb-16;

  .talbe-box {
    @apply rounded-md shadow-md;
  }
}
</style>